<template>
  <div class="xbackgrond-color">
    <!-- 第一块 -->
<div class="xmokuai-top">

<div class="xmokuai-width">
<!-- 标题部分 -->
  <div class="xmokuai-title">
    <div class="xtitle-left">
<div class="xtitile-left-font">
交易数据
</div>
    </div>
    <div class="xtitle-right">
<div class="xtitile-right-content">
<el-button @click="onSubmitOne1" size="small">导出数据</el-button>
  <el-radio-group v-model="radio1" size="small" class="xmargin-left">
      <el-radio-button label="昨天"></el-radio-button>
      <el-radio-button label="最近7天"></el-radio-button>
      <el-radio-button label="最近30天"></el-radio-button>
    </el-radio-group>
 <div class="block xmargin-left">
    <el-date-picker
      v-model="value1"
      type="date"
      size="small"
      placeholder="选择日期">
    </el-date-picker>
  </div>

</div>
    </div>
  </div>
  <!-- 内容块  -->
  <div class="xmokuai-content">

  <div class="business-one">
<div class="business-one-auto business-height">
  <!-- 左边 -->
  <div class="business-one-left">
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="浏览人数"
      width="95"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="下单人数"
      width="95"
      align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="订单数"
        width="95"
      align="center">
    </el-table-column>
       <el-table-column
      prop="x"
      label="下单件数"
        width="95"
      align="center">
    </el-table-column>
       <el-table-column
      prop="y"
      label="有效订单数"
      align="center">
    </el-table-column>
       <el-table-column
      prop="z"
      label="下单金额"
        width="120"
      align="center">
    </el-table-column>
  </el-table>
<el-table
    :data="tableData2"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="退款金额"
      width="95"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="付款人数"
      width="95"
      align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="付款订单数"
        width="95"
      align="center">
    </el-table-column>
       <el-table-column
      prop="x"
      label="付款件数"
        width="95"
      align="center">
    </el-table-column>
       <el-table-column
      prop="y"
      label="付款金额"
      align="center">
    </el-table-column>
       <el-table-column
      prop="z"
      label="客单价"
       width="120"
      align="center">
    </el-table-column>
  </el-table>

  </div>
  <!-- 饼子图 -->
  <div class="business-one-right">
 <div id="pyramid" style="width:100%;height:300px;"></div>
  </div>
  
</div>
  </div>
<!-- 折现图 -->
<div class="business-one-chart">
     <div id="xx" style="width: 900px;height:400px;margin-left:10px;"></div>
  </div>
  </div>
</div>

</div>

  <!-- 第二块 -->
<div class="xmokuai-top">

<div class="xmokuai-width">
<!-- 标题部分 -->
  <div class="xmokuai-title">
    <div class="xtitle-left">
<div class="xtitile-left-font">
新老客户交易构成
</div>
    </div>
    <div class="xtitle-right">
<div class="xtitile-right-content">
<el-button @click="onSubmitOne2" size="small">导出数据</el-button>
  <el-radio-group v-model="radio2" size="small" class="xmargin-left">
      <el-radio-button label="本月"></el-radio-button>
      <el-radio-button label="上月"></el-radio-button>
    </el-radio-group>
 <div class="block xmargin-left">
    <el-date-picker
      v-model="value2"
      type="date"
      size="small"
      placeholder="选择日期">
    </el-date-picker>
  </div>

</div>
    </div>
  </div>
  <!-- 内容块  -->
  <div class="xmokuai-content business-height2">
<!-- 饼子图 -->
<div class="businessTwo-left">
   <div id="pancakeOne" style="width: 100%;height:230px;margin-top:10px;"></div>
</div>
<!-- 表 -->
<div class="businessTwo-right">
<el-table
    :data="tableDataTwo"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label=""
      width="80"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="付款金额"
     
      align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="较前一月"
        width="100"
      align="center">
    </el-table-column>
       <el-table-column
      prop="x"
      label="付款人数"
        width="90"
      align="center">
    </el-table-column>
       <el-table-column
      prop="y"
      label="较前一月"
        width="100"
      align="center">
    </el-table-column>
  </el-table>



</div>

  </div>
</div>

</div>
  <!-- 第三块 -->
<div class="xmokuai-top">

<div class="xmokuai-width">
<!-- 标题部分 -->
  <div class="xmokuai-title">
    <div class="xtitle-left">
<div class="xtitile-left-font">
交易数据
</div>
    </div>
    <div class="xtitle-right">
<div class="xtitile-right-content">
<el-button @click="onSubmitOne3" size="small">导出数据</el-button>
  <el-radio-group v-model="radio3" size="small" class="xmargin-left">
      <el-radio-button label="昨天"></el-radio-button>
      <el-radio-button label="最近7天"></el-radio-button>
      <el-radio-button label="最近30天"></el-radio-button>
    </el-radio-group>
 <div class="block xmargin-left">
    <el-date-picker
      v-model="value3"
      type="date"
      size="small"
      placeholder="选择日期">
    </el-date-picker>
  </div>

</div>
    </div>
  </div>
  <!-- 内容块  -->
  <div class="xmokuai-content">
    <!-- 柱子图 -->
<div>
   <div id="pillar" style="width: 100%;height:400px;"></div>
</div>

  </div>
</div>

</div>
  <!-- 第四块 -->
<div class="xmokuai-top">

<div class="xmokuai-width">
<!-- 标题部分 -->
  <div class="xmokuai-title">
    <div class="xtitle-left">
<div class="xtitile-left-font">
订单来源构成
</div>
    </div>
    <div class="xtitle-right">
<div class="xtitile-right-content">
<el-button @click="onSubmitOne4" size="small">导出数据</el-button>
  <el-radio-group v-model="radio4" size="small" class="xmargin-left">
      <el-radio-button label="本月"></el-radio-button>
      <el-radio-button label="上月"></el-radio-button>
    </el-radio-group>
 <div class="block xmargin-left">
    <el-date-picker
      v-model="value4"
      type="date"
      size="small"
      placeholder="选择日期">
    </el-date-picker>
  </div>

</div>
    </div>
  </div>
  <!-- 内容块  -->
  <div class="xmokuai-content">
    <!-- 双饼图 -->
<div>
  <div class="businessFour-left">
  <div id="pancakeTwo" style="width: 100%;height:300px;"></div>
  </div>
<div class="businessFour-right">
   <div id="pancakeThree" style="width: 100%;height:300px;"></div>
</div>

</div>
<!-- 表 -->
<div class="businessFour-form">
<el-table
    :data="tableDataThree"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label=""
      width="200"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="付款金额"
      align="center">
    </el-table-column>
    <el-table-column
      prop="address"
      label="较前一月"
        width="200"
      align="center">
    </el-table-column>
       <el-table-column
      prop="x"
      label="付款人数"
        width="200"
      align="center">
    </el-table-column>
       <el-table-column
      prop="y"
      label="较前一月"
        width="200"
      align="center">
    </el-table-column>
  </el-table>

</div>

  </div>
</div>

</div>


  </div>
</template>
<style>

  .xmargin-left{
    margin-left: 5px;
  }
  .xbackgrond-color{
   background-color: rgb(249, 249, 249);
  }
  .xmokuai-top{
    width: 100%;
    margin-top: 20px;
  }
  .xmokuai-width{
    width: 90%;
    margin: auto;
    
  }
  .xmokuai-title{
    height: 50px;
   background-color: rgb(240, 240, 240);
  }
  .xtitle-left{
    float: left;
  }
   .xtitle-right{
    float: right;
  }
  .xtitile-left-font{
    margin-left: 10px;
    line-height: 50px;
    font-size: 15px;
  }
  .xtitile-right-content{
    margin-right: 10px;
line-height: 50px;
  }
  .xmokuai-content{
    width: 100%;
  background-color: white;
  }
  .business-height{
    height:320px;
  }
  .business-height2{
    height: 380px;
  }
  .business-one{
    margin-top: 10px;
   
  }
  .business-one-auto{
     width: 95%;
    margin:auto;
  }
  .business-one-left{
    float: left;
    width: 620px;
    height: 300px;
   
  }
  .business-one-right{
    float:right;
    width: 300px;
    height: 300px;
  }
  .business-one-chart{
   
    margin-top: 50px;

    
   
  }
  /* 第二托 */
  .businessTwo-left{
    width: 50%;
    height: 250px;
   
    float: left;
  }
  .businessTwo-right{
    width: 50%;
     height: 250px;
    padding-top: 100px;
   
    float: left;
  }
  /* 第四个 */
  .businessFour-left{
    float: left;
    width: 50%;
    height: 400px;
  }
  .businessFour-right{
   float: left;
    width: 50%;
    height: 400px;
  }
  .businessFour-form{
   margin-bottom: 50px;
    width:100%;
 
  }
</style>
<script>
export default {
  data(){
    return{ 
      // 表1
       radio1: '昨天',
       value1:'',

      //  表格
       tableData: [{
          date: '1888',
          name: '80',
          address: '144',
          x:'643',
          y:'130',
          z:'￥1905871.71'
        }
        ],
        tableData2: [{
          date: '￥1046.01',
          name: '55',
          address: '81',
          x:'381',
          y:'￥1967849.99',
          z:'￥24294.44'
        }
        ],
       // 表2
        tableDataTwo: [{
          date: '新客户',
          name: '￥1970700.49',
          address: '↑ 4.73%',
          x:'30',
          y:' ↓ -92.00%'
        },
        {
          date: '老客户',
          name: '￥0.00',
          address: '/',
          x:'42',
          y:'↑ 9599%'
        }
        ],
        
       radio2: '昨天',
       value2:'',
       // 表3
       radio3: '昨天',
       value3:'',
       // 表4
         tableDataThree: [{
          date: 'APP',
          name: '100',
          address: '/',
          x:'￥0.00',
          y:'/'
        },
        {
          date: '微信端',
          name: '100',
          address: '/',
          x:'￥0.00',
          y:'/'
        },
        {
          date: 'PC端',
          name: '100',
          address: '/',
          x:'￥0.00',
          y:'/'
        },
        {
          date: '小程序',
          name: '100',
          address: '/',
          x:'￥0.00',
          y:'/'
        },
        {
          date: '其他',
          name: '100',
          address: '/',
          x:'￥0.00',
          y:'/'
        }
        ],
       radio4: '昨天',
       value4:'',
    }
  },

   
  methods:{
     OrderChart(){
     let myChart =this.$echarts.init(document.getElementById("pyramid"))
     let option={
         title: {
        text: '',
        subtext: ''
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    // toolbox: {
    //     feature: {
    //         dataView: {readOnly: false},
    //         restore: {},
    //         saveAsImage: {}
    //     }
    // },
    legend: {
        data: ['浏览','下单','付款']
    },
    calculable: true,
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '5%',
            top: 40,
            //x2: 80,
            // bottom: 60,
            width: '90%',
            height:200,
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            // minSize: '0%',
            // maxSize: '100%',
            minSize: '0%',              //每一块的最小宽度
            maxSize:'100%',               //每一块的最大快递   一次去除掉尖角
            sort: 'descending',
            gap: 5,                //每一块之间的间隔
            label: {            //设置每一块的名字是显示在图里面还是外面
                show: true,
                position: 'inside'
            },
            labelLine: {           
                length: 50,             //设置每一块的名字前面的线的长度
                lineStyle: {
                    width: 1,         //设置每一块的名字前面的线的宽度
                    type: 'solid'    //设置每一块的名字前面的线的类型
                }
            },
            itemStyle: {
                normal: { 
                    borderColor: '#fff',        //每一块的边框颜色
                    borderWidth: 0,             //每一块边框的宽度
                    shadowBlur: 50,             //整个外面的阴影厚度
                    shadowOffsetX: 0,
                    shadowOffsetY: 50,          //每一块的x轴的阴影
                    shadowColor: 'rgba(0, 0, 0, 0.5)'    //阴影颜色
                }
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                {value: 60, name: '浏览',barHeight: 10,},
                {value: 40, name: '下单'},
                {value: 20, name: '付款'},
               
            ]
        }
    ]

     }
     myChart.setOption(option)
     },

     OrderChartA() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("xx"))
      // 指定图表的配置项和数据
      let option = {
         title: {
                        text: '交易数据'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['2017-07-01', '2017-07-05', '2017-07-09', '2017-07-13', '2017-07-17', '2017-07-21', '2017-07-25', '2017-07-29', '2017-08-02']
                    },
                    tooltip: {
                        trigger: 'axis',
                        // 标线
                        axisPointer: {
                        type: 'cross',
                       crossStyle: {
                       color: '#999',
                         },
              }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                     legend: {
                        orient: 'vertical',
                     xAxis:'center',
                      bottom:'bottom',
                data: ['付款金额', '付款人数', '付款件数','下单转化率','付款转化率','成交转化率'],
            },
                    yAxis:[ {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                           },
                            {
                        type: 'value',
                        name:'转化率(%)',
                        axisLabel: {
                            formatter: '{value} '
                        }
                           }
                    ],
                    series: [{
                        name: '付款金额',
                        type: 'line',
                        data: [11108, 1313, 1316, 1011, 15115, 11113, 11215, 1100, 1181, 1128, 7119, 11131],
                    },
                    {
                        name: '退款金额',
                        type: 'line',
                        data: [1228, 5222, 1322, 722, 1335, 338, 1233, 1330, 3381, 338, 733, 331],
                    },
                      {
                        name: '付款人数',
                        type: 'line',
                        data: [1338, 5443, 1333, 7333, 15777773, 83333, 16665, 16660, 111181, 128, 33339, 1111],
                    },
                     {
                        name: '付款件数',
                        type: 'line',
                        data: [199, 5000, 10006,6660, 1665, 888, 1995, 1000, 1881, 128, 79, 131],
                    },
                     {
                        name: '下单转化率',
                        type: 'line',
                        yAxisIdex:1,
                        data: [68, 53, 146, 75, 165, 88, 185, 100, 51, 78, 79, 11],
                    },
                     {
                        name: '付款转化率',
                        type: 'line',
                        yAxisIndex:1,
                        data: [44, 25, 33, 63, 88, 88, 69, 88, 56, 74, 89, 59],
                    },
                     {
                        name: '成交转化率',
                        type: 'line',
                         yAxisIndex: 1,
                        data: [44, 55, 33, 33, 88, 88, 66, 88, 56, 74, 79, 56],
                    },
                    
                    ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
// 饼图
OrderChartB(){
     let myChart =this.$echarts.init(document.getElementById("pancakeOne"))
     let option={
         tooltip: {
                   trigger: 'item',
                  
                 },
                 legend: {
                   orient: 'vertical',
                   x: 'left',
                   data:['老客户','新客户']
                 },
                 series: [
                   {
                     name:'客户表',
                     type:'pie',
                     radius:'80%',
                    
                     avoidLabelOverlap: false,
                     label: {
                       normal: {
                         show: false,
                         position: 'center'
                       },
                       emphasis: {
                         show: true,
                         textStyle: {
                           fontSize: '30',
                           fontWeight: 'blod'
                         }
                       }
                     },
                     labelLine: {
                       normal: {
                         show: false
                       }
                     },
                     data:[{value:2222,name:'老客户'},
                           {value:4444,name:'新客户'}]
                   }
                 ]
     }
     myChart.setOption(option)
     },

    //  柱子图

     OrderChartC() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("pillar"))
      // 指定图表的配置项和数据
      let option = {
         title: {
                        text: '交易数据'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['0-50元', '51-100元', '101-200元', '201-500元', '501-1000元', '1001-5000元', '5001-10000元', '100001元以上']
                    },
                    tooltip: {
                        trigger: 'axis',
                       
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                     legend: {},

                    yAxis:[ {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} '
                        }
                           }       
                    ],
                    series: [{
                        name: '',
                        type: 'bar',
                        barWidth:'40',
                        data: [8,2,10,6,6,2,44,22],
                          itemStyle: {
                normal: {
                  color: '#5E76D7', // 设置柱子颜色
                  label: {
                    show: false, // 柱子上显示值
                    position: 'inside', // 值在柱子上方显示
                    textStyle: {
                      color: '#fff' // 值得颜色
                    }
                  }
                }
              }
                    }
                    
                    
                    ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },

    // 饼图
OrderChartD(){
     let myChart =this.$echarts.init(document.getElementById("pancakeTwo"))
     let option={
         tooltip: {
                   trigger: 'item',
                  
                 },
                 legend: {
                   orient: 'vertical',
                   x: 'center',
                   bottom:'bottom',
                   data:['App','微信','PC端','小程序','其他']
                 },
                 series: [
                   {
                     name:'订单来源构成',
                     type:'pie',
                     radius:'70%',
                    
                     avoidLabelOverlap: false,
                     label: {
                       normal: {
                         show: false,
                         position: 'center'
                       },
                       emphasis: {
                         show: true,
                         textStyle: {
                           fontSize: '80',
                           fontWeight: 'blod'
                         }
                       }
                     },
                     labelLine: {
                       normal: {
                         show: false
                       }
                     },
                     data:[{value:2222,name:'App'},
                           {value:4444,name:'微信'},
                           {value:2222,name:'PC端'},
                           {value:4444,name:'小程序'},
                            {value:4444,name:'其他'}
                          ]
                   }
                 ]
     }
     myChart.setOption(option)
     },
// 饼图
OrderChartE(){
     let myChart =this.$echarts.init(document.getElementById("pancakeThree"))
     let option={
         tooltip: {
                   trigger: 'item',
                  
                 },
                 legend: {
                   orient: 'vertical',
                   x: 'center',
                   bottom:'bottom',
                   data:['App','微信','PC端','小程序','其他']
                 },
                 series: [
                   {
                     name:'订单来源构成',
                     type:'pie',
                     radius:'70%',
                    
                     avoidLabelOverlap: false,
                     label: {
                       normal: {
                         show: false,
                         position: 'center'
                       },
                       emphasis: {
                         show: true,
                         textStyle: {
                           fontSize: '80',
                           fontWeight: 'blod'
                         }
                       }
                     },
                     labelLine: {
                       normal: {
                         show: false
                       }
                     },
                     data:[{value:2222,name:'App'},
                           {value:454,name:'微信'},
                           {value:22,name:'PC端'},
                           {value:424,name:'小程序'},
                            {value:244,name:'其他'}
                          ]
                   }
                 ]
     }
     myChart.setOption(option)
     },
    // 
    onSubmitOne1(){
console.log("导出数据")
    },
     onSubmitOne2(){
console.log("导出数据")
    },
     onSubmitOne3(){
console.log("导出数据")
    },
     onSubmitOne4(){
console.log("导出数据")
    }
  },
   mounted() {
     this.OrderChart();
    this.OrderChartA();
    this.OrderChartB();
    this.OrderChartC();
    this.OrderChartD();
    this.OrderChartE();
  }
}
</script>